import '../css/todolist.scss'
import { useState } from 'react';
import HeaderListHooks from "../todoList/HeaderListHooks";
import ListHooks from "../todoList/ListHooks";
import ContextTodo, { state } from "../store/contextTodo";//引入全局数据
const TodoListHooks = () => {
  const [list, setlist] = useState(state)//state是拿到全局的todo数据

  // 添加
  const addTodoList=(msg)=>{
   let arrTodo = {...list}
   arrTodo.todoList.push(msg)//拿到子组件的数据push到todolist中
   setlist(arrTodo)//更改视图
  }

  return (<>
    <div className="todolist">
      <div className="todo_list">
        {/* 把数据传给子组件 */}
      <ContextTodo.Provider value={{...list,addTodoList}}>
        <HeaderListHooks />
        <ListHooks />
      </ContextTodo.Provider>
      </div>
    </div>
  </>);
}

export default TodoListHooks;